<!-- 任务模块 -->
<template>
  <div id="Tasks">
    <div class="tasks_box">
      <el-checkbox-group v-model="checkList">
        <div v-for="(item, index) in tasksListData" :key="index">
          <el-checkbox :label="item.id">
            <p>{{ item.title }}</p>
            <span> {{ $moment(item.time).format('yyyy-MM-DD HH:mm:ss') }}</span>
          </el-checkbox>
          <el-divider v-if="index !== tasksListData.length - 1" />
        </div>
      </el-checkbox-group>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Tasks',
  props: {
    tasksListData: {
      type: Array,
      default: () => {}
    }
  },
  data() {
    return {
      checkList: []
    }
  },
  /* HTML DOM加载后马上执行的，如赋值*/
  computed: {},

  /* 观察Vue实例上的数据变动 */
  watch: {},

  /* 模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图 */
  created() {},

  /* 模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作 */
  mounted() {},

  /* methods则必须要有一定的触发条件才能执行 */
  methods: {}
}
</script>

<style lang='scss' scoped>
.tasks_box{
  .el-checkbox{
    display: flex;
    align-items: center;
    width: 100%;
    height: 50px;
    p{
      font-size: 1.2rem;
      font-weight: bold;
      margin: 10px 0;
    }
    .span{
      font-size: 1rem;
      color: #6c757d ;
    }
  }
}
</style>
